<template>
	<view class="page">
		<!-- 地址列表 -->
		<view class="address-list">
			<view v-for="(item, index) in addressList" :key="index" class="address-item" @click="selectAddress(item)">
				<view class="address-info">
					<view class="user-info">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
					</view>
					<view class="address-detail">{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
				</view>
				<view class="address-actions">
					<view class="action-btn edit" @click.stop="editAddress(item)">编辑</view>
					<view class="action-btn delete" @click.stop="deleteAddress(item)">删除</view>
				</view>
			</view>
		</view>

		<!-- 添加新地址按钮 -->
		<view class="add-address" @click="addAddress">
			<text>添加新地址</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 模拟地址数据
const addressList = ref([
	{
		id: 1,
		name: '张三',
		phone: '13800138000',
		province: '广东省',
		city: '深圳市',
		district: '南山区',
		detail: '科技园南区8栋101'
	},
	{
		id: 2,
		name: '李四',
		phone: '13900139000',
		province: '广东省',
		city: '广州市',
		district: '天河区',
		detail: '天河路385号'
	}
])

// 选择地址
const selectAddress = (address) => {
	// 将选中的地址存储到本地
	uni.setStorageSync('selectedAddress', address)
	// 返回上一页
	uni.navigateBack()
}

// 添加地址
const addAddress = () => {
	uni.navigateTo({
		url: '/pages/address/edit'
	})
}

// 编辑地址
const editAddress = (address) => {
	uni.navigateTo({
		url: `/pages/address/edit?id=${address.id}`
	})
}

// 删除地址
const deleteAddress = (address) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除该地址吗？',
		success: (res) => {
			if (res.confirm) {
				// 这里应该调用删除地址的API
				const index = addressList.value.findIndex(item => item.id === address.id)
				if (index > -1) {
					addressList.value.splice(index, 1)
				}
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.page {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.address-list {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.address-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.address-info {
	.user-info {
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.phone {
		font-size: 28rpx;
		color: #666;
	}

	.address-detail {
		font-size: 28rpx;
		color: #333;
	}
}

.address-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 20rpx;
	gap: 20rpx;
}

.action-btn {
	padding: 10rpx 20rpx;
	font-size: 24rpx;
	border-radius: 6rpx;
	
	&.edit {
		color: #666;
		background-color: #f5f5f5;
	}
	
	&.delete {
		color: #ff6b81;
		background-color: #fff5f6;
	}
}

.add-address {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #ff6b81;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
}
</style> 